<template>
  <UserCard
    @addfollowerCount="addfollowerCount"
    @reducefollowerCount="reducefollowerCount"
    :userinfo="userinfo"
  >
  </UserCard>
  <a-row style="margin-top: 8px">
    <a-col :span="6" :offset="2">
      <UserBrief :brief="userinfo.brief"></UserBrief>
    </a-col>
    <a-col :span="13" :offset="1">
      <a-card>
        <a-menu v-model:selectedKeys="current" mode="horizontal">
          <a-menu-item key="home">
            主页
            <router-link :to="{ name: 'userspace' }"></router-link>
          </a-menu-item>

          <a-menu-item key="essay">
            文章
            <router-link :to="{ name: 'essays' }"></router-link>
          </a-menu-item>

          <a-menu-item key="album">
            相簿
            <router-link :to="{ name: 'album' }"></router-link>
          </a-menu-item>

          <a-menu-item key="mp4">
            AI
            <router-link :to="{ name: 'ai' }"></router-link>
          </a-menu-item>
        </a-menu>
        <template v-if="current[0] === 'home'">
          <img
            style="width: 100%"
            src="https://img.sj33.cn/uploads/202002/7-20020H30414.gif"
          />
        </template>
        <router-view></router-view>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import UserCard from "@/components/user/space/UserCard";
import UserBrief from "@/components/user/space/UserBrief";
import { reactive, ref } from "@vue/reactivity";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import userApi from "@/apis/userApi";
import { onMounted, watchEffect } from "@vue/runtime-core";
// import userApi from '@/apis/userApi';
export default {
  name: "UserSpaceView",
  components: {
    UserCard,
    UserBrief,
  },

  setup() {
    const store = useStore();
    const route = useRoute();

    const access = store.state.user.info.access;
    let userId = route.params.userId;

    let userinfo = reactive({
      id: "",
      avatar: "",
      followerCount: "",
      username: "",
      brief: "",
      concernCount: "",
      visitCount: "",
    });

    watchEffect(() => {
      // 接收路由参数
      userId = route.params.userId;
      // 加载数据
      userApi.getUserInfo(userId, access).then((resp) => {
        userinfo.id = resp.data.userinfo.id;
        userinfo.username = resp.data.userinfo.username;
        userinfo.avatar = resp.data.userinfo.photo;
        userinfo.followerCount = resp.data.userinfo.followerCount;
        userinfo.brief = resp.data.userinfo.brief;
        userinfo.concernCount = resp.data.userinfo.concernCount;
        userinfo.visitCount = resp.data.userinfo.visitCount;
      });
    });

    onMounted(() => {
      getUserInfo(userId, access);
    });

    const getUserInfo = (userId, access) => {
      userApi.getUserInfo(userId, access).then((resp) => {
        userinfo.id = resp.data.userinfo.id;
        userinfo.username = resp.data.userinfo.username;
        userinfo.avatar = resp.data.userinfo.photo;
        userinfo.followerCount = resp.data.userinfo.followerCount;
        userinfo.brief = resp.data.userinfo.brief;
        userinfo.concernCount = resp.data.userinfo.concernCount;
        userinfo.visitCount = resp.data.userinfo.visitCount;
      });
    };

    const addfollowerCount = () => {
      userinfo.followerCount += 1;
      store.commit("addConcernCount");
    };

    const reducefollowerCount = () => {
      userinfo.followerCount -= 1;
      store.commit("reduceConcernCount");
    };

    let current = ref(["home"]);

    return {
      current,
      userinfo,

      addfollowerCount,
      reducefollowerCount,
    };
  },
};
</script>

<style scoped>
</style>